<!-- 侧栏 作者信息 -->
<template>
  <sidebar-block class="author-block">
    <a href="#" class="user-item item">
      <img src="https://p6-passport.byteacctimg.com/img/user-avatar/4dc7a8e7c4eff9e00a99a907f23bc1d1~200x200.image" alt="" class="avatar">
      <div class="info-box">  
          <div style="display: flex; align-items: center;">
            <span class="name">玛卡巴卡</span>
            <span class="rank" style="display: flex; align-items: center; margin-left: 5px;">
              <img style="margin:auto;" src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/lv-5.d08789d.png" alt="">
            </span>
          </div>
          <div title="公众号：前端要摸鱼 @ &lt;&lt;联系我可关注留言" class="position">
          公众号：前端要摸鱼 @ &lt;&lt;联系我可关注留言
          </div>
      </div>
    </a>
    <div class="stat-item item">
          <i class="el-icon-position icon"></i>
          <span class="content">获得点赞&nbsp;11,435</span>
    </div>
    <div class="stat-item item">
          <i class="el-icon-view icon"></i>
          <span class="content">文章被阅读&nbsp;733,435</span>
    </div>
  </sidebar-block>
</template>

<script>
import SidebarBlock from './SidebarBlock.vue';


export default {
  name:'AuthorBlock',
  data () {
    return {

    }
  },
  components:{
    SidebarBlock
  }
}
</script>

<style  scoped>
.author-block{
    border-radius: 4px;
    background: #fff;
    padding: 20.004px;
}

.user-item{
  border-bottom: 1px solid #e4e6eb;
    padding-bottom: 16.992px;
}

.item{
  display: flex;
    align-items: center;
}

.user-item .info-box{
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 15.996px;
}
/* 头像 */
.user-item .avatar{
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
/* 作者信息 */
.user-item .info-box .username {
    font-size: 15.996px;
    font-weight: 500;
    line-height: 24px;
    color: #252933;
    white-space: pre-wrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-item .info-box .position {
    margin-top: 4px;
    font-size: 14.004px;
    color: #515767;
    font-weight: 400;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank img {
    width: 35px;
    height: 16px;
}
/* 作者文章状态 */
.stat-item {
    margin-top: 8.004px;
}

.stat-item:first-of-type {
    margin-top: 16.992px;
}

.stat-item .icon{
    margin-right: 12px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(123, 185, 255);
    background-color: rgb(225, 239, 255);
}

.stat-item .content {
    font-size: 14.004px;
    color: #252933;
    font-weight: 400;
}
</style>
